<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.div1{
				width: 200px;
				height: 200px;
				background: yellow;
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		
		<div id="main">
		</div>
		
		
		<script type="text/javascript">
			//创建一个input标签
			var inp = document.createElement("input");
			//设置input标签的属性
			inp.setAttribute("type","text");
			inp.setAttribute("value","范啸天");
			var main = document.getElementById("main");
			//追加节点
			main.appendChild(inp);
			
			//给div中添加一个超链接
			var  a = document.createElement("a");
			a.setAttribute("href","chop3.html");
			a.innerHTML = "去第一个页面";
			//将a标签插入到input标签之前
			main.insertBefore(a,inp);
			
			//在div中新建一个div，且设置该div的宽高为200，背景色为黄色
			var div = document.createElement("div");
			div.setAttribute("class","div1");
			main.appendChild(div);
			
			//克隆一个div
			var div2 = div.cloneNode(true);
			main.appendChild(div2);
			
			//删除main div中的最后一个div
			var divr = main.lastElementChild;
			main.removeChild(divr);
			
			//将文本框替换成按钮
			var btn = document.createElement("input");
			btn.setAttribute("type","button");
			btn.setAttribute("value","按钮");
			main.replaceChild(btn,inp);
			
		</script>
	</body>
</html>
